<template>
  <div class="create-room-dialog-wrapper" v-if="dialogVisible">
    <div class="dialog-mask"></div>
    <div class="dialog-container">
      <!-- 对话框内容 -->
      <div class="dialog-content">
        <h3>创建房间</h3>
        <div class="dialog-body">
          <!-- 房间名称输入 -->
          <div class="form-item">
            <label class="form-label">房间名称</label>
            <input
                v-model="roomName"
                type="text"
                class="form-input"
                placeholder="请输入房间名称">
          </div>

          <!-- 房间描述输入 -->
          <div class="form-item">
            <label class="form-label">房间描述</label>
            <textarea
                v-model="roomDescription"
                class="form-input description-input"
                placeholder="请输入房间描述（选填）"
                rows="3" maxlength="32"></textarea>
          </div>

          <!-- 房间类型选择 -->
          <div class="form-item">
            <label class="form-label">房间类型</label>
            <div class="room-type-options">
              <div
                  class="room-type-option"
                  :class="{ 'active': roomType === 'public' }"
                  @click="selectRoomType('public')">
                <font-awesome-icon :icon="['fas', 'house']" class="room-type-icon public-icon" />
                <span class="room-type-text">公开房间</span>
              </div>
              <div
                  class="room-type-option"
                  :class="{ 'active': roomType === 'private' }"
                  @click="selectRoomType('private')">
                <font-awesome-icon :icon="['fas', 'house-lock']" class="room-type-icon private-icon" />
                <span class="room-type-text">私密房间</span>
              </div>
            </div>
          </div>

          <!-- 私密房间密码输入（仅在选择私密房间时显示） -->
          <div class="form-item" v-if="roomType === 'private'">
            <label class="form-label">房间密码</label>
            <input
                v-model="roomPassword"
                type="password"
                class="form-input"
                placeholder="请输入6-20位房间密码">
            <p class="error-message" v-if="!isPasswordValid && roomPassword.length > 0">
              {{ roomPassword.length < 6 ? '密码长度不能少于6位' : '' }}
            </p>
          </div>

          <!-- 房间图片上传区域 -->
          <div class="form-item">
            <label class="form-label">房间图片</label>
            <div class="room-image-upload">
              <div class="upload-area" @click="triggerFileInput" :class="{ 'has-image': roomImage }">
                <input ref="fileInput" type="file" accept="image/*" @change="handleImageUpload" style="display: none;">
                <div v-if="!roomImage" class="upload-placeholder">
                  <span class="upload-icon">+</span>
                  <span class="upload-text">点击上传房间图片</span>
                </div>
                <div v-else class="image-preview">
                  <img :src="roomImage" alt="房间图片预览">
                  <button class="remove-image" @click.stop="removeImage">×</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 底部按钮 -->
        <div class="dialog-footer">
          <button @click="closeDialog">取消</button>
          <button
              @click="confirmCreateRoom"
              :disabled="!isFormValid"
              :class="{ 'disabled-btn': !isFormValid }">
            创建房间
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RoomCreateDialog",
  props: {
    createRoom: {
      type: Function,
    }
  },
  data() {
    return {
      dialogVisible: false,
      roomName: '',
      roomDescription: '', // 添加描述字段
      roomType: 'public', // 默认公开房间
      roomPassword: '',
      roomImage: null,
      isPasswordValid: true
    }
  },
  computed: {
    // 表单是否有效
    isFormValid() {
      return this.roomName.trim().length > 0 &&
          (this.roomType === 'public' || this.isPasswordValid);
    }
  },
  methods: {
    openDialog() {
      this.dialogVisible = true

      // 重置表单数据
      this.roomName = ''
      this.roomDescription = '' // 重置描述字段
      this.roomType = 'public'
      this.roomPassword = ''
      this.roomImage = null
    },

    closeDialog() {
      this.dialogVisible = false
    },

    // 选择房间类型
    selectRoomType(type) {
      this.roomType = type
      if (type === 'public') {
        this.roomPassword = ''
        this.isPasswordValid = true
      }
    },

    // 触发文件输入
    triggerFileInput() {
      this.$refs.fileInput.click()
    },

    // 处理图片上传
    handleImageUpload(event) {
      const file = event.target.files[0]
      if (file) {
        const reader = new FileReader()
        reader.onload = (e) => {
          this.roomImage = e.target.result
        }
        reader.readAsDataURL(file)
      }
    },

    // 移除图片
    removeImage() {
      this.roomImage = null
      this.$refs.fileInput.value = ''
    },

    // 验证密码
    validatePassword() {
      this.isPasswordValid = this.roomPassword.length >= 6
    },

    // 创建房间
    async confirmCreateRoom() {
      // 这里可以添加创建房间的逻辑
      const room = {
        name: this.roomName,
        description: this.roomDescription, // 包含描述字段
        type: this.roomType === 'public' ? 1 : 2,
        password: this.roomType === 'private' ? this.roomPassword : null,
       // image: this.roomImage
      }
      this.createRoom(room)
      // 模拟创建成功
      this.closeDialog()
    }
  },
  watch: {
    // 监听密码变化进行验证
    roomPassword: {
      handler() {
        if (this.roomType === 'private') {
          this.validatePassword()
        }
      },
      immediate: true
    }
  },
  mounted() {
    if (this.$el && this.$el.parentNode !== document.body) {
      document.body.appendChild(this.$el)
    }
  },
  beforeDestroy() {
    if (this.$el && this.$el.parentNode === document.body) {
      document.body.removeChild(this.$el)
    }
  }
}
</script>

<style scoped>
.create-room-dialog-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
}

.dialog-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.dialog-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.dialog-content {
  width: 500px;
  max-width: 90vw;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transform: translateZ(0);
  position: relative;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

h3 {
  margin: 0;
  padding: 16px 20px;
  color: #fff;
}

.dialog-body {
  padding: 0 20px 20px;
}

/* 表单样式 */
.form-item {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
}

.form-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.25rem;
  font-size: 0.9rem;
  background-color: #333;
  color: #fff;
  outline: none;
  height: 30px;
  transition: border-color 0.2s;
}

.form-input:focus {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

/* 描述输入框样式 */
.description-input {
  resize: none;
  height: auto;
  padding: 8px 10px;
  min-height: 80px;
}

/* 房间类型选择样式 */
.room-type-options {
  display: flex;
  gap: 10px;
}

.room-type-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.3s;
  color: rgba(255, 255, 255, 0.7);
}

.room-type-option:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.room-type-option.active {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.room-type-icon {
  margin-right: 8px;
  font-size: 16px;
}

/* 公开房间图标颜色 */
.public-icon {
  color: #4CAF50; /* 绿色 - 代表公开、安全 */
}

/* 私密房间图标颜色 */
.private-icon {
  color: #FF9800; /* 橙色 - 代表私密、需要注意 */
}

/* 选中状态下的图标颜色 */
.room-type-option.active .public-icon {
  color: #81C784; /* 亮绿色 */
}

.room-type-option.active .private-icon {
  color: #FFB74D; /* 亮橙色 */
}

/* 错误提示样式 */
.error-message {
  color: #ff4d4f;
  font-size: 0.8rem;
  margin: 5px 0 0 0;
}

/* 房间图片上传样式 */
.room-image-upload {
  width: 100%;
}

.upload-area {
  width: 100%;
  height: 200px;
  border: 2px dashed rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.upload-area:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
}

.upload-placeholder {
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

.upload-icon {
  display: block;
  font-size: 48px;
  margin-bottom: 10px;
  font-weight: 100;
}

.upload-text {
  font-size: 14px;
}

.image-preview {
  width: 100%;
  height: 100%;
  position: relative;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 6px;
}

.remove-image {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  margin-left: 0;
}

.remove-image:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* 底部按钮样式 */
.dialog-footer {
  padding: 10px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: right;
}

button {
  margin-left: 10px;
  padding: 6px 12px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 4px;
  transition: all 0.2s;
}

button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* 禁用状态的按钮样式 */
button.disabled-btn {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: rgba(255, 255, 255, 0.05);
}

button.disabled-btn:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
</style>